@import "index.less";
.music-btn{
	position: absolute;
	width: 88/20rem;
	height: 88/20rem;
	right: 1.5rem;
	top: 50%;
	margin-top: -88/40rem;
	background: url(../img/open_music.png) no-repeat;
	background-size: 100% 100%;
	.transition(all 0.5s ease-in);
	  z-index: 10;
	&.closem{
		background: url(../img/close_music.png) no-repeat;
		background-size: 100% 100%;
	}
}
#stage2{
	.pageall{
        position: absolute;
		width: 200%;
        top: 0%;
		left: 0%;
        bottom: 15%;
	}
	.page1{
		position: relative;
		float: left;
		width: 50%;
		height: 100%;
	}
	.page2{
		position: relative;
		float: left;
		width: 50%;
		height: 100%;
	}
	.to-next{
		position: absolute;
		width: 218/20rem;
		height: 110/20rem;
		left: 50%;
        bottom: 2%;
		background: url(../img/s2/to_next.png) no-repeat;
		background-size: 100% 100%;
	}
}
#stage3,#stage10{
	background-image: url("../img/bg_5.jpg");
    overflow: hidden;

    .arrow-main {
        top    : auto;
        bottom : 2rem;
    }

    .con-bg{
        width: 1rem;
        height: 1rem;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        margin: -.5rem 0px 0px -.5rem;
        background: #fff;
        opacity: 0;
    }
    .con-bg-big{
        .animation(hand-bg-big 600ms linear forwards);
    }
	.content{
		position: absolute;
		width: 530/20rem;
		height: 27.7rem;
		top: 32%;
		left: 50%;
		margin-top: -13.9rem;
		margin-left: -11.5rem;
		display: block;
	}
	.content1{
		margin-top: -5.9rem;
		.txt1{
			position: relative;
			width: 311/20rem;
			height: 83/20rem;
			background: url(../img/s5/txt1_1.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 2.2rem;
		}
		.txt2{
			position: relative;
			width: 212/20rem;
			height: 62/20rem;
			background: url(../img/s5/txt1_2.png) no-repeat;
			background-size: 100% 100%;
		}
		.txt3{
			position: relative;
			width: 415/20rem;
			height: 83/20rem;
			background: url(../img/s5/txt1_3.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 5rem;
		}
		.txt4{
			position: relative;
			width: 22.8rem;
			height: 5.4rem;
			background: url(../img/s5/txt1_4.png) no-repeat;
			background-size: 100% 100%;
		}
		.txt5{
			position: relative;
			width: 15.5rem;
			height: 3.9rem;
			background: url(../img/s5/txt1_5.png) no-repeat;
			background-size: 100% 100%;
		}
	}
	.content2{
		.txt1{
			position: relative;
			width: 135/20rem;
			height: 73/20rem;
			background: url(../img/s5/txt2_1.png) no-repeat;
			background-size: 100% 100%;
		}
		.txt2{
			position: relative;
			width: 419/20rem;
			height: 99/20rem;
			background: url(../img/s5/txt2_2.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 4rem;
		}
		.txt3{
			position: relative;
			width: 315/20rem;
			height: 73/20rem;
			background: url(../img/s5/txt2_3.png) no-repeat;
			background-size: 100% 100%;
		}
		.txt4{
			position: relative;
			width: 512/20rem;
			height: 101/20rem;
			background: url(../img/s5/txt2_4.png) no-repeat;
			background-size: 100% 100%;
		}
	}
	.content3{
		.txt1{
			position: relative;
			width: 445/20rem;
			height: 107/20rem;
			background: url(../img/s5/txt3_1.png) no-repeat;
			background-size: 100% 100%;
		}
		.txt2{
			position: relative;
			width: 282/20rem;
			height: 78/20rem;
			background: url(../img/s5/txt3_2.png) no-repeat;
			background-size: 100% 100%;
		}
		.txt3{
			position: relative;
			width: 377/20rem;
			height: 77/20rem;
			background: url(../img/s5/txt3_3.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 5rem;
		}
		.txt4{
			position: relative;
			width: 351/20rem;
			height: 77/20rem;
			background: url(../img/s5/txt3_4.png) no-repeat;
			background-size: 100% 100%;
		}
		.txt5{
			position: relative;
			width: 454/20rem;
			height: 116/20rem;
			background: url(../img/s5/txt3_5.png) no-repeat;
			background-size: 100% 100%;
		}
	}
}
#stage10{
	.content1{
		position: absolute;
		width: 20rem;
		height: 166/20rem+2.5rem+165/20rem+3rem+307/20rem+1rem;
		top: 50%;
		left: 50%;
		margin-top: -(166/20rem+2.5rem+165/20rem+3rem+307/20rem+1rem)/2rem;
		margin-left: -20/2rem;
		.txt1{
			position: relative;
			width: 356/20rem;
			height: 166/20rem;
			background: url(../img/s5/txt2_1.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 2.5rem;
		}
		.txt2{
			position: relative;
			width: 397/20rem;
			height: 165/20rem;
			background: url(../img/s5/txt2_2.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 3rem;
		}
		.txt3{
			position: relative;
			width: 380/20rem;
			height: 307/20rem;
			background: url(../img/s5/txt2_3.png) no-repeat;
			background-size: 100% 100%;
            margin-bottom: 0rem;
		}
	}
}
#stage11{
	background-image: url("../img/bg_6.jpg");
    overflow: hidden;
    background-size: 100% auto;
    background-position: center 31%;
    &.inited{
    	.con-box img{
			.scale (1.5);
		}
    }
    .title{
    	position: relative;
    	width: 100%;
    	height: 20%;
    	background: url(../img/s6/title.png) no-repeat;
    	background-size: 21.8rem 6.8rem;
    	background-position: center center;
    	display: block;
    }
    .con-box{
    	position: relative;
    	padding-top: 5.6rem;
    	width: 32rem;
    	height: 21.4rem;
    	background: url(../img/s6/con_bg.png) no-repeat;
    	background-size: 100% 100%;
    	img{
    		position: relative;
    		height: 8.5rem;
    		width: 14rem;
    		display: block;
    		margin: 0 auto;
    		.transform-origin (center, 0);
    		.transition(all 1.5s ease-in 2s);
    		.scale (1);
    	}
  //   	&.showBig img{
		// 	.scale (1.5);
		// }
    }
    .push{
        width: 23rem;
        height: 10rem;
		position: absolute;
        bottom: 2%;
		left: 50%;
		margin-left: -11.5rem;
		display: block;
    }
}
#stage12{
	background-image: url("../img/bg_7.jpg");
    overflow: hidden;
    background-size: 100% auto;
    background-position: center 70%;
    &.share-in{
        background-image: url("../img/bg_8.jpg");
    }
    &.inited{
    	.content{
			.transition(all 0.6s ease-in);
			opacity: 1;
		}
    }
    .content-box{
        position: relative;
        width: 21.4rem+(2*1.8rem);
        height: 70%;
        margin: 12% auto 0;
        .close{
            display: none;
            position: absolute;
            right: -3.3rem;
            top: 0;
            width: 64/20rem;
            height: 64/20rem;
            text-indent: -9999px;
            background: url(../img/close.png) no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }
    }
	.content{
		position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
		padding: 1.8rem;
		background: #fff;
		opacity: 0;
        overflow: hidden;
        overflow-y: auto;
		h2{
			position: relative;
			font-size: 1.7rem;
			color: #525252;
			font-weight: normal;
			margin-bottom: 0.5rem;
			&:after{
				content: "";
				width: 0.3rem;
				height: 1.7rem;
				background: #de1419;
				position: absolute;
				left: -1rem;
				top: 0.3rem;
			}
		}
		p{
			font-size: 1.3rem;
			color: #525252;
			font-weight: normal;
			text-indent: 2rem;
			margin-bottom: 0.5rem;
		}
		.showImg1{
			position: relative;
            max-width: 21.5rem;
			height: 7.5rem;
			display: block;
			margin-bottom: 0.5rem;
			background: url(../img/img1.jpg) no-repeat;
			background-size: 100% 100%;
			.showImg1-box{
				position: absolute;
				width: 4rem;
				height: 2.1rem;
				left: 6.3rem;
				top: 2.5rem;
                background: url("../img/s6/showimg.png") no-repeat;
                background-size: cover;
                background-position: center center;
			}
		}
		.showImg2{
			position: relative;
			max-width: 21.5rem;
			height: 13.6rem;
			display: block;
			margin-bottom: 0.5rem;
			background: url(../img/img2.jpg) no-repeat;
			background-size: 100% 100%;
			.showImg2-box{
				position: absolute;
				width: 13.2rem;
				height: 8rem;
				left: 1.1rem;
				top: 3.5rem;
                background: url("../img/s6/showimg.png") no-repeat;
                background-size: cover;
                background-position: center center;
			}
		}
	}
	.share, .come-in{
    	position: absolute;
		top: 82%;
		left: 50%;
		margin-left: -11.5rem;
		width: 23rem;
		height: 21%;
		display: block;
    }
    .come-in{
        display: none;
    }
}
.pop{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 900;
	display: none;
}
.popshare{
	.pop-show{
		position: absolute;
		width: 559/20rem;
		height: 250/20rem;
		right: 1rem;
		top: 1rem;
		background: url(../img/share.png) no-repeat;
		background-size: 100% 100%;
	}
}
.tipsshare{
	background: none;
	.pop-bg{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		display: none;
	}
	.pop-con{
		position: absolute;
		width: 28.8rem;
		height: 5.8rem;
		left: 50%;
		top: 50%;
		margin-left: -14.4rem;
		margin-top: -2.9rem;
		background: url(../img/tips_bg.png) no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		display: block;
	}
	&.anishow{
		.pop-con{
			.animation(slineing 3s linear forwards);
		}
	}
}
.tipsshare2{
	background: none;
	.pop-bg{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
	}
	.pop-con{
		position: absolute;
		width: 28.8rem;
		height: 5.8rem;
		left: 50%;
		top: 50%;
		margin-left: -14.4rem;
		margin-top: -2.9rem;
		background: url(../img/tips_bg2.png) no-repeat;
		background-size: 100% 100%;
		opacity: 0;
	}
	&.anishow{
		.pop-con{
			.animation(slineing 3s linear forwards);
		}
	}
}
.arrow-main{
	position: absolute;
	width: 137/20rem;
	height: 91/20rem;
	top: 70%;
	left: 50%;
	margin-left: -137/40rem;
	i{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	.i-arrow1{
		background: url(../img/next_1.png) no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		.scale (0);
	}
	.i-arrow2{
		background: url(../img/next_2.png) no-repeat;
		background-size: 100% 100%;
		opacity: 0;
	}
	.i-arrow3{
		background: url(../img/next_3.png) no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		.translate (0, -1rem);
	}
	.i-arrow5{
		opacity: 0;
		em{
			display: block;
			width: 100%;
			height: 100%;
			background: url(../img/next_5.png) no-repeat;
			background-size: 100% 100%;
			.animation(ani-allow 2s linear infinite);
		}

	}
}
.keyframes(ani-allow, {
    0% {
        .translate (0, 0);
    }
    50% {
        .translate (0, 0.6rem);
    }
    100% {
        .translate (0, 0);
    }
});
.anishow1{
	opacity: 0;
}
.anishow2{
	opacity: 0;
}
.anishow3{
	opacity: 0;
}
.anishow4{
	opacity: 0;
}
.anishow5{
	opacity: 0;
}
.anishowslow {
	opacity: 0;
}
.aniShowtxt{
	.anishow1{
		opacity: 1;
		.transition(all 0.5s ease-in);
	}
	.anishow2{
		opacity: 1;
		.transition(all 0.5s ease-in);
	}
	.anishow3{
		opacity: 1;
		.transition(all 0.5s ease-in);
	}
	.anishow4{
		opacity: 1;
		.transition(all 0.5s ease-in);
	}
	.anishow5{
		opacity: 1;
		.transition(all 0.5s ease-in);
	}
	.anishowslow {
		opacity: 1;
		.transition(all 1.3s ease-in 0.7s);
	}
}
.aniShowtxt2{
    .anishow1{
        opacity: 1;
        .transition(all 1s ease-in 0s);
    }
    .anishow2{
        opacity: 1;
        .transition(all 1s ease-in 1s);
    }
    .anishow3{
        opacity: 1;
        .transition(all 1s ease-in 2s);
    }
    .anishow4{
        opacity: 1;
        .transition(all 0.5s ease-in 2.5s);
    }
    .anishow5{
        opacity: 1;
        .transition(all 0.5s ease-in 3s);
    }
}
.inited{
	.arrow-main{
		.i-arrow1{
			opacity: 1;
			.scale (1);
			.transition(all 0.5s linear 2s);
		}
		.i-arrow2{
			opacity: 1;
			.transition(all 0.5s linear 1s);
		}
		.i-arrow3{
			opacity: 1;
			.translate (0, 0);
			.transition(all 0.5s linear 1.5s);
		}
		.i-arrow4{
			opacity: 1;
			.transition(all 0.5s linear 2.5s);
		}
		.i-arrow5{
			opacity: 1;
			.transition(all 0.5s ease-in 3s);
		}
	}
}

